import React from 'react';
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from 'react-native';

//响应式布局联练习 Dimensions
const DimensionsPage = () => {
    return (
        <View style={styles.root}>
            <View style={styles.item}>
                <Text style={styles.text}>
                    扫一扫
                </Text>
            </View>

            <View style={styles.item}>
                <Text style={styles.text}>
                    付款码
                </Text>
            </View>

            <View style={styles.item}>
                <Text style={styles.text}>
                    卡包
                </Text>
            </View>

            <View style={styles.item}>
                <Text style={styles.text}>
                    出行
                </Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        flexDirection: "row",
        flexWrap: "wrap"
    },
    item: {
        justifyContent: "center",
        alignItems: "center",
        height: 100,
        width: Dimensions.get("window").width / 4,
        padding: 10
    },
    text: {
        borderColor: "red",
        borderWidth: 1,
        backgroundColor: "#999999",
        width: "100%",
        height: "100%",
        textAlign: "center",
        textAlignVertical: "center"
    }
})

export default DimensionsPage;
